<template>
	<div class="container">
		<!-- <div
      id="sortPrintNote"
      :style="{
        width: print_seting.width + 'mm',
        height: print_seting.height + 'mm',
        position: 'absolute',
        overflow: 'hidden',
      }"
    >
      <span
        v-for="(item, index) in main_setting.goodslist"
        :key="index"
        style="
          position: absolute;
          overflow: hidden;
          z-index: 1;
          letter-spacing: 1px;
        "
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          fontSize: main_setting.fontset.fontSize + 'px',
          fontWeight: main_setting.fontset.bold ? 'bold' : 'none',
          textDecoration: main_setting.fontset.underline ? 'underline' : 'none',
          fontStyle: main_setting.fontset.italic ? 'italic' : 'none',
        }"
        ><template
          >{{ item.label }}:{{ order[`${item.index - 1}`] }}</template
        ></span
      >
      <div
        v-for="item in qrcode_data.qrcodelist"
        id="qrcode"
        :key="item.label"
        style="position: absolute; overflow: hidden; z-index: 10"
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
        }"
      >
        <img :src="qrcode_img" alt="" style="diplay: block; width: 100%" />
      </div>
    </div> -->
	</div>
</template>

<script>
import { getLodop } from "@/utils/LodopFuncs";
import { sort_note_print } from "@/api/index.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
// import { get_print_mark } from "@/api/global/globalPrint";
import QRCode from "qrcodejs2";
export default {
	data() {
		return {
			print_seting: {},
			main_setting: {
				goodslist: [],
				fontset: {
					fontSize: "14",
					bold: false,
					underline: "false",
					italic: false,
					textAlign: "center",
				},
			},
			order: [],
			print_set_info: "",
			//二维码
			qrcode_data: {
				qrcodelist: [],
				selectType: [],
			},
			source: {},
			qrCodeId: "",
			qrcode_img: "",
			goods_sku_code: "",
			//  辅助线
			sublineData: {
				sublinelist: [],
				selectType: [],
			},
		};
	},
	mounted() {
		this.monitoringPrintNote(); // 注册监听事件
	},
	updated() {},
	methods: {
		monitoringPrintNote() {
			// 监听事件
			this.$on("sortPrintNote", async (res) => {
				let id = await this.getTemplateData(res.data);
				res.cb(id);
			});
		},

		// 加载数据
		getTemplateData(res) {
			return new Promise((resolve, reject) => {
				let id = res.id;
				let num = "";
				if (res.num) {
					num = res.num;
				}
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: id }
				);
				sort_note_print(data).then(async (res) => {
					if (res.errcode == 0) {
						let data = res.list;
						this.main_setting = JSON.parse(
							data.mubang.main_settings
						).goodsSetData;

						this.qrcode_data = JSON.parse(data.mubang.main_settings).qrcodeData;
						this.sublineData = JSON.parse(
							data.mubang.main_settings
						).sublineData;
						this.source = data.img;
						this.print_seting = JSON.parse(data.mubang.print_settings);
						this.order = data.order;
						if (num) {
							this.order[5] = num;
						}
						this.qrcode_img = res.list.img;
						this.goods_sku_code = res.list.goods_sku_code;
						await this.print(this.print_seting);
						resolve(id);
					} else {
						this.$message.error(res.errmsg);
					}
				});
			});
		},
		// 订单打印事件
		print(params) {
			let LODOP = getLodop();
			if (!LODOP) {
				return;
			}
			if (params.print_mark != -1) {
				LODOP.SET_PRINTER_INDEX(params.print_mark);
			}
			LODOP.SET_PRINT_PAGESIZE(
				1,
				params.width + "mm",
				params.height + "mm",
				""
			);
			// LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //设置页面缩放
			// LODOP.ADD_PRINT_HTML(
			//   params.topMargin + "px",
			//   params.leftMargin + "px",
			//   "100%",
			//   "100%",
			//   document.getElementById("sortPrintNote").innerHTML
			// );
			this.AddPrintContent();
			if (params.isShow) {
				LODOP.PREVIEW();
			} else {
				LODOP.PRINT();
			}
		},
		AddPrintContent() {
			let mmTopx = "";
			if (localStorage.getItem("getOneMmsPx")) {
				mmTopx = localStorage.getItem("getOneMmsPx");
			} else {
				mmTopx = this.getOneMmsPx();
			}

			let { fontset, goodslist } = JSON.parse(
				JSON.stringify(this.main_setting)
			);
			let sublinelist = [];
			let subline_selectType = [];
			if (this.sublineData) {
				sublinelist = JSON.parse(JSON.stringify(this.sublineData)).sublinelist;
				subline_selectType = JSON.parse(JSON.stringify(this.sublineData))
					.selectType;
			}

			let order = JSON.parse(JSON.stringify(this.order));
			let print_seting = JSON.parse(JSON.stringify(this.print_seting));
			let qrcode_data = JSON.parse(JSON.stringify(this.qrcode_data));
			let { bold, fontSize, italic, textAlign, underline } = fontset;
			let { qrcodelist, selectType } = qrcode_data;
			let align = {
				center: 2,
				left: 1,
				right: 3,
			};

			let lineType = {
				1: 0,
				2: 1,
				3: 2,
			};
			sublinelist.map((e) => {
				subline_selectType.map((p) => {
					if (e.index == p) {
						e.end_left = e.left;
						e.end_top = e.top;
						e.top = e.top + "px";
						e.left = e.left + "px";

						if (e.direction == 1) {
							// 横线
							LODOP.ADD_PRINT_LINE(
								e.top,
								e.left,
								e.top,
								e.end_left + e.length * mmTopx,
								lineType[e.line_type],
								e.size
							);
						} else if (e.direction == 2) {
							// 竖线
							LODOP.ADD_PRINT_LINE(
								e.top,
								e.left,
								e.end_top + e.length * mmTopx,
								e.left,
								lineType[e.line_type],
								e.size
							);
						}
					}
				});
			});

			LODOP.SET_PRINT_STYLE("FONTSIZE", fontSize);
			LODOP.SET_PRINT_STYLE("Bold", bold ? 1 : 0);
			LODOP.SET_PRINT_STYLE("Italic", italic ? 1 : 0);
			LODOP.SET_PRINT_STYLE("Underline", underline ? 1 : 0);
			// LODOP.SET_PRINT_STYLE("Alignment", align[textAlign]);

			let width = `${print_seting.width}mm`;
			let height = `${print_seting.height}mm`;
			goodslist.map((e) => {
        if(e.label && ['商品名称【规格】', '商品名称'].includes(e.label)) e.label = '商品'
				if (e.index == undefined) {
          e.text = e.showPrefix ? "" : e.label + ":" + "" ;
          // e.text = e.label + ":" + "";
        } else {
          let labelText = order[e.index - 1] || ''
          e.text = e.showPrefix ? labelText : e.label + ":" + labelText;
        }
				e.left = e.left + "px";
				e.top = e.top + "px";
				LODOP.ADD_PRINT_TEXT(e.top, e.left, width, height, e.text);
				if(e.fontset) {
          LODOP.SET_PRINT_STYLEA(0, "FONTSIZE", e.fontset.fontSize);
          LODOP.SET_PRINT_STYLEA(0, "Bold", e.fontset.bold ? 1 : 0);
          LODOP.SET_PRINT_STYLEA(0, "Italic", e.fontset.italic ? 1 : 0);
          LODOP.SET_PRINT_STYLEA(0, "Underline", e.fontset.underline ? 1 : 0);
        }
			});
			qrcodelist.map((e) => {
				if (e.index == 1) {
					// 二维码
					e.left = e.left - 8 + "px";
					e.top = e.top - 8 + "px";
					e.width = e.width + "mm";
					e.height = e.height + "mm";

					LODOP.ADD_PRINT_IMAGE(
						e.top,
						e.left,
						18 + "mm",
						18 + "mm",
						` <img src="${this.qrcode_img}" alt="" style="diplay: block; width: 100%" />`
					);
				}
				if (e.index == 2) {
					// 条形码;
					e.left = e.left + "px";
					e.top = e.top + "px";
					e.width = 35 + "mm";
					e.height = 10 + "mm";
					if (this.goods_sku_code) {
						LODOP.ADD_PRINT_BARCODE(
							e.top,
							e.left,
							e.width,
							e.height,
							"EAN128C",
							this.goods_sku_code
						);
						LODOP.SET_PRINT_STYLEA(0, "FontSize", 6);
            LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);
					}
				}
			});
		},
		getOneMmsPx() {
			let div = document.createElement("div");
			div.id = "mm";
			div.style.width = "1mm";
			document.querySelector("body").appendChild(div);
			let mm1 = document.getElementById("mm").getBoundingClientRect();
			localStorage.setItem("getOneMmsPx", mm1.width);
			return mm1.width;
		},
	},
};
</script>

<style lang="scss" scoped></style>
